<div class="bg-light lter b-b wrapper-md">
  <h1 class="m-n font-thin h3">直播流管理</h1>
</div>
<div class="wrapper-md">
  <div class="row">


  </div>

  <div class="col-sm-12">
    <div class="panel panel-default">

      <div  ng-controller="dataTablesCtrl">
       <div class="row">

         <div class="col-sm-12" >
           <div class="panel-heading">

            <a href="javascript:void(0);" ng-click="goEdit();" ><button class="btn btn-default btn-sm "><i class="fa fa-edit fa-lg"></i>&nbsp; 编辑</button></a>

            <a href="javascript:void(0);" ng-click="goRemove();" ><button class="btn btn-default btn-sm "><i class="fa fa-trash-o fa-lg"></i>&nbsp; 删除</button></a>

            <!--隐藏域-->
            <input type="hidden" id ="optIds" name="optIds">


          </div>
        </div>


      </div>
      <table id="myTable" class="table table-striped m-b-none">
      </table>



    </div>
  </div>
</div>

</div>

</div>







<!--播放功能隐藏部分-->
        <!--   <div id ="ckplayer" style="display: none;">
              <nav ui-nav class="navi" ng-include="'src/app/play/player.html'"></nav>
             
            </div>  -->
            <!--播放功能隐藏部分-->


            <!--样式-->
            <style type="text/css">  
              div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}  
              div#rMenu a{  
                cursor: pointer;  
                list-style: none outside none;  
              }  

              .selected {
                background-color: #DFF0D8;
              }

              /* dataTables列内容居中 */
              .table>tbody>tr>td{
                text-align:center;
              }

              /* dataTables表头居中 */
              .table>thead:first-child>tr:first-child>th{
                text-align:center;
              }
              #urlDate{
                padding-top: 80px;
                padding-left: 40px;
              }


            </style>
            <!--样式-->

            <!--右键菜单-->
            <nav ui-nav class="navi" ng-include="'src/app/stream/ztree_edit.html'"></nav>

            <script type="text/javascript">

//angularjs总控制器
app.controller('dataTablesCtrl', function($scope, $http,$state) {
//进入编辑页面
$scope.goEdit = function () {
  var optIds = $('#optIds').val();
  if(''==optIds){
    top.layer.msg('请至少选择一项', {icon: 6});
    return false;
  }
  if(optIds.indexOf(",") != -1){
    top.layer.msg('编辑只能选择一项', {icon: 6});
    return false;
  }
  $state.go('app.stream.streamEdit', {infoId: optIds});
};


//进入编辑页面
$scope.goRemove = function () {
 var optIds = $('#optIds').val();
 if(''==optIds){
  top.layer.msg('请至少选择一项', {icon: 6});
  return false;
}

top.layer.confirm('您确定删除这些信息吗', function(index){

  var postInfoUrl = API_URL+"stream_info";

  var optArrs = optIds.split(',');

  for(var i = 0;i< optArrs.length;i++ ){

   var infoUrl = API_URL+"stream_info?query=delflag:0,Id:"+optArrs[i];

   var formData =  MY_ASYNC_AJAX(infoUrl)[0];

   formData.Delflag = "1";

   $.ajax({
     url : postInfoUrl+'/'+optArrs[i],
     type : 'put',
     data: JSON.stringify(formData),
     cache : false,
     success : function(data) {

     }
   });

 }
 top.layer.msg('删除成功');
 $('#myTable').DataTable().ajax.reload(); 
});
};

});




function checkOne(){
  var optIds = '';
  $("input[name='ids']:checkbox:checked").each(function(){ 
    optIds+=$(this).val() +',';
  });
  if(''!=optIds){
    optIds = optIds.substring(0,optIds.length-1);
  }
  $('#optIds').val(optIds);

  console.log($('#optIds').val());
}

function checkAll(){
  var checklist = document.getElementsByName("ids");
  var checkFather = document.getElementById("allChecked");
  if(checkFather.checked){
    for(var i=0;i<checklist.length;i++){
      checklist[i].checked = true;
    }
  }else {
    for (var j= 0; j < checklist.length; j++) {
      checklist[j].checked = false;
    }
  }

  var optIds ='';
  if(checkFather.checked){
    $("input[name='ids']:checkbox:checked").each(function(index, el) {
      optIds+=$(this).val()+',';
      
    });
  }else {
    optIds='';
  }
  //这里是为了去掉 最后一个逗号
  if(optIds!=null&&optIds!=''){
    optIds=optIds.substring(0, optIds.length-1);
  }

  $("#optIds").val(optIds);
  console.log($("#optIds").val());
}



var dtUrl =  API_URL+"stream_info?query=delflag:0";





$(document).ready(function(){


 //初始化dataTable
 var table =  $('#myTable').DataTable({
  ajax: {  
    url: dtUrl,  
    success:function(json){
        //清空表格
        $('#myTable').dataTable().fnClearTable();  
        if(null==json){
          $('#myTable').dataTable().fnClearTable();  
        }else{
           $('#myTable').dataTable().fnAddData(json,true);  //刷下表格
         }  
       }
     },
     deferRender:true,
     Processing:true,
     buttons: [
     {
      extend: 'collection',
      text: 'Export',
      buttons: [ 'csv-flash', 'xls-flash', 'pdf-flash' ]
    }
    ],
            //默认最后一列（最后更新时间）降序排列
            order: [[3, "desc"]],

            //行创建完成后回调
            rowCallback: function (row, data, index) {

            },
            aoColumns: [
            { data : "Id",
            title: "<input type='checkbox' id='allChecked' name='allChecked' onclick='checkAll()'/>",
            orderable: false , 
            render : function(data, type, full, meta) {
              return '<input type="checkbox" value="'+ data + '" name="ids" onclick="checkOne()"/>';
            }},
            { data: "Id",
            title: "ID"
          },
          { data: "StreamName" ,
          title: "流名称"
        },
        { data: "SignalTransMode" ,
        title: "信号传输模式",
        render: function (data, type, row, meta) {
          if(row.SignalTransMode=='push'){
           return "<p >推送流</p>"
         }else {
          return "<p >拉取流</p>";
        }
      }
    },

    { data:"StreamEnable",
    title: "时移时间"
  },

  { data:"PublishCount",
  title: "发布次数"
},
{
  targets:6,
  data: null,
  title: "流地址",
  render: function (data, type, row, meta) {

    var href = '';

    href += "&nbsp;  <a href='javascript:void(0);' onclick= getUrl("
    + row.Id
    + ")>";
    href += "<i  title='查看' class='fa icon-link fa-lg'></i></a>";

    return href;

  }
},
{ data: "StreamEnable"  ,
title: "启/停",
render: function (data, type, row, meta) {
  var href = '';
  if(row.StreamEnable==1){
    href += "&nbsp;  <a href='javascript:void(0);' onclick=updateDisplay('stream',0,"
    + row.Id
    + ")>";
    href += "<i  title='启用' style='color:#2e8ded;' class='fa icon-refresh fa-lg'></i>";
  }else{
    href += "&nbsp;  <a href='javascript:void(0);' onclick=updateDisplay('stream',1,"
    + row.Id
    + ")>";
    href += "<i  title='停用' class='fa icon-power fa-lg '></i>";
  }
  return href;

}
}
],
columnDefs: [

{
  targets: 8,
  data: null,
  title: "显示",
  render: function (data, type, row, meta) {
    var href = '';
    if(row.StreamDisplayOnPc==1){
      href += "&nbsp;  <a href='javascript:void(0);' onclick=updateDisplay('pc',0,"
      + row.Id
      + ")>";
      href += "<i style='color:#2e8ded;' title='PC' class='fa fa-laptop fa-lg'></i></a>";

    }else{
      href += "&nbsp;  <a href='javascript:void(0);' onclick=updateDisplay('pc',1,"
      + row.Id
      + ")>";
      href += "<i  title='PC' class='fa fa-laptop fa-lg'></i></a>";
    }
    if(row.StreamDisplayOnPhone==1){
      href += "&nbsp;  <a href='javascript:void(0);' onclick=updateDisplay('phone',0,"
      + row.Id
      + ")>";
      href += "<i style='color:#2e8ded;' title='Phone' class='fa fa-phone fa-lg'></i></a>";

    }else{
      href += "&nbsp;  <a href='javascript:void(0);' onclick=updateDisplay('phone',1,"
      + row.Id
      + ")>";
      href += "<i  title='Phone' class='fa fa-phone fa-lg'></i></a>";

    }

    if(row.StreamDisplayOnPad==1){
      href += "&nbsp;  <a href='javascript:void(0);' onclick=updateDisplay('pad',0,"
      + row.Id
      + ")>";
      href += "<i title='pad' style='color:#2e8ded;' class='fa fa-tablet fa-lg'></i></a>";
    }else{
      href += "&nbsp;  <a href='javascript:void(0);' onclick=updateDisplay('pad',1,"
      + row.Id
      + ")>";
      href += "<i title='pad' class='fa fa-tablet fa-lg'></i></a>";
    }


    if(row.StreamDisplayOnTv==1){

      href += "&nbsp;  <a href='javascript:void(0);' onclick=updateDisplay('tv',0,"
      + row.Id
      + ")>";
      href += "<i title='TV' style='color:#2e8ded;' class='fa fa-tv fa-lg'></i></a>";
    }else{
      href += "&nbsp;  <a href='javascript:void(0);' onclick=updateDisplay('tv',1,"
      + row.Id
      + ")>";
      href += "<i title='TV' class='fa fa-tv fa-lg'></i></a>";
    }

    return href;

  }
},
{
  targets:9,
  data: null,
  title: "操作",
  render: function (data, type, row, meta) {

    var href = '';
    href += "&nbsp;  <a href='#/app/stream/stream/edit/"+row.Id+"'>";
    href += "<i  title='编辑' class='fa fa-edit fa-lg'></i></a>";

    href += "&nbsp;  <a href='javascript:void(0);' onclick=goDelete("
    + row.Id
    + ")>";
    href += "<i  title='删除' class='fa fa-trash-o fa-lg'></i></a>";


    return href;

  }
},


{
  targets:10,
  data: null,
  title: "预览",

  render: function (data, type, row, meta) {
   var href = '';
   var fileInfoUrl = API_URL+"stream_status?query=delflag:0,Id:"+row.Id;
   var resultDate = MY_ASYNC_AJAX(fileInfoUrl);
   if(resultDate!=null&&resultDate!=''){

    href += "&nbsp;  <a style='color:#2e8ded;'  href='javascript:void(0);' onclick=goPlayer("
    + row.Id
    + ")>";
    href += "<i  title='预览' class='fa fa-play-circle-o fa-lg'></i></a>";

  }else {
   href += "&nbsp;  <a 'href='javascript:void(0);' onclick=goPlayer("
   + row.Id
   + ")>";
   href += "<i  title='预览' class='fa fa-play-circle-o fa-lg'></i></a>";

 }          
 return href;

}
}

],
drawCallback: function( settings ) {


},

initComplete:function(data){

},
Paginate: true, 
language:{
 url: 'vendor/jquery/datatables/Chinese.json'
}
});
});  





//单条删除
function goDelete(id){
  top.layer.confirm('您确定删除吗', function(index){        
    var postInfoUrl = API_URL+"stream_info";
    var infoUrl = API_URL+"stream_info?query=delflag:0,Id:"+id;
    var formData =  MY_ASYNC_AJAX(infoUrl)[0];
    formData.Delflag = "1";
    $.ajax({
      url : postInfoUrl+'/'+id,
      type : 'put',
      data: JSON.stringify(formData),
      cache : false,
      success : function(data) {
        top.layer.msg('删除成功');
        $('#myTable').DataTable().ajax.reload(); 
      }
    });
    top.layer.close(index);
  });
}

function getUrl(id){

 var fileInfoUrl = API_URL+"file_info?query=delflag:0,Id:"+id;
 var resultDate = MY_ASYNC_AJAX(fileInfoUrl);
 if(resultDate==null){
  top.layer.msg('暂时没有注入视频', {icon: 6});
  return false;
}
var formData =  MY_ASYNC_AJAX(fileInfoUrl)[0];

var fileId = formData.FileUuid;

          //通过文件ID 得到播放地址Id
          var getPlayUrl = API_URL+"/load_balancer/vod_play_url?AccessToken=AccessTokenString&FileUuid="+fileId;
          var playInfo =  MY_ASYNC_AJAX(getPlayUrl)[0];
          playUrl = playInfo.Url;



          layer.open({
           type: 1,
           title: '',
           fix: false,
           shadeClose: false,
           anim: 4,
           move: true,
           area: ['300px', '200px'],

           content:"<div id='urlDate'></div>",
           success:function(){
            var ur = '<label>URL:</label>&nbsp<input type="text" id="playUrl" value='+playUrl+'>&nbsp&nbsp<button onclick="copy(event);">复制</button>';

            $(ur).appendTo("#urlDate");
          }
        })
        }

        function copy(event){
          $("#playUrl").select();
          document.execCommand("copy",false,null);
          top.layer.msg('复制成功', {icon: 6});

          $("#playUrl").close();
        }



        var playUrl = "";
        function goPlayer(id){
          //通过数据Id 得到文件ID
          var fileInfoUrl = API_URL+"file_info?query=delflag:0,Id:"+id;
          var resultDate = MY_ASYNC_AJAX(fileInfoUrl);

          if(resultDate==null){
            top.layer.msg('暂时没有播放数据', {icon: 6});
            return false;
          }
          var formData =  MY_ASYNC_AJAX(fileInfoUrl)[0];
          var fileId = formData.FileUuid;
          console.log(fileId);
          
          //通过文件ID 得到播放地址Id
          var getPlayUrl = API_URL+"/load_balancer/vod_play_url?AccessToken=AccessTokenString&FileUuid="+fileId;
          var playInfo =  MY_ASYNC_AJAX(getPlayUrl)[0];
          playUrl = playInfo.Url;
          console.log(playUrl);
          if(undefined==playUrl||playUrl==''){
           top.layer.msg('暂时没有播放数据', {icon: 6});
           return false;
         }
         top.layer.open({
          type: 1,
          title: '',
          fix: false,
          shadeClose: false,
          anim: 4,
          move: true,
          area: ['600px', '400px'],
          content:"<div id='stream_video'><\/div>"
          ,success:function(){
            var flashvars={
              f:playUrl,
              c:0,
              p:1
            };
            doPlayVideo(flashvars);
          }

        });
       }
       function doPlayVideo(flashvars){

        var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
         CKobject.embedSWF('vendor/jquery/ckplayer6.8/ckplayer/ckplayer.swf','stream_video','ckplayer_a1','600','400',flashvars,params);

          var video=[playUrl];
          var support=['iPad','iPhone','ios','android+false','msie10+false'];
         CKobject.embedHTML5('stream_video','ckplayer_a1',600,400,video,flashvars,support);
      }

//修改是否展示状态
function updateDisplay(type,value,id){
  var info = '您确定';
  if(1==value){
    info+='启用';
  }else{
    info+='停止';
  }
  
  if('pc'==type){
    info+='电脑端';
  }else if('phone'==type){
    info+='手机端';
  }else if('pad'==type){
    info+='pad端';
  }else if('tv'==type){
    info+='电视机端';
  }else if('stream'==type){
    info+='流'  
  }
  
  info+="显示吗？";



  //发起POST请求
  var postInfoUrl = API_URL+"stream_info";

  var infoUrl = API_URL+"stream_info?query=delflag:0,Id:"+id;

  var formData =  MY_ASYNC_AJAX(infoUrl)[0];
  


  if('pc'==type){
    formData.StreamDisplayOnPc = value+"";
  }else if('phone'==type){
    formData.StreamDisplayOnPhone = value +"";
  }else if('pad'==type){
    formData.StreamDisplayOnPad = value+"";
  }else if('tv'==type){
    formData.StreamDisplayOnTv = value+"";
  }else if('stream'==type){
    formData.StreamEnable = value+"";
  }


  top.layer.confirm(info, function(index){

    $.ajax({
      url : postInfoUrl+'/'+id,
      type : 'put',
      data: JSON.stringify(formData),
      cache : false,
      success : function(data) {
        top.layer.msg('更新成功');

        $("#myTable").DataTable().ajax.reload().draw();


      }
    });

    top.layer.close(index);
  });


}



</script>







